<template>
    <div class="login-container">
        <div class="login-center">
            <h3>好书有伴配置管理</h3>

            <el-form 
                :model="loginFormData" 
                ref="loginForm"
                :rules="rules"
                label-width="80px"
                class="demo-ruleForm"
                size="large"
            >
                <el-form-item label="用户名：" prop="username">
                    <el-input 
                        v-model="loginFormData.username" 
                        type="text" autocomplete="off"
                        :prefix-icon="User"     
                    />
                </el-form-item>
                <el-form-item label="密&emsp;码：" prop="password">
                    <el-input 
                        v-model="loginFormData.password" 
                        :type="flag ? 'text' : 'password'" 
                        autocomplete="off" 
                        :prefix-icon="Lock"   
                        @keyup.enter="submitForm(loginForm)" 
                    >
                        <template #suffix>
                            <el-icon class="el-input__icon eyes" @click="flag = !flag">
                                <Hide v-if="flag"/>
                                <View v-else />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item class="btns">
                    <el-button type="primary" @click="submitForm(loginForm)"
                        >登 录</el-button
                    >
                    <!-- <el-button @click="resetForm(loginForm)">重置</el-button> -->
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>

<script setup >
import { onMounted, ref } from 'vue'
import { User, Search, Lock, View, Hide } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

import { reqLogin } from '../../api/login.js'

// 登录数据
const flag = ref(false)
const loginForm = ref()
const loginFormData = ref({
    username: 'admin',
    password: '123456'
})

const router = useRouter()

const checkUsername = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入用户名！'))
  }
  const userReg = /^[0-9A-Za-z_\u4e00-\u9fa5]{2,10}$/
  if(!userReg.test(value)) {
    callback(new Error('用户名不满足2-10位字母数字下划线或中文！'))
  } else {
    callback()
  }
}

const checkPassword = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入密码'))
  }
  const userReg = /^[0-9A-Za-z_]{6,12}$/
  if(!userReg.test(value)) {
    callback(new Error('密码包含6-12位字母数字下划线！'))
  } else {
    callback()
  }
}

const rules = {
    username: [{ validator: checkUsername, trigger: 'blur' }],
    password: [{ validator: checkPassword, trigger: 'blur' }],
}

// 提交登录请求事件
const submitForm = formEl => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {

        try {
            const data = await reqLogin(loginFormData.value)
            if(data.code === 200) {
                ElMessage({
                    message: data.msg,
                    type: 'success',
                    duration: 1.5 * 1000
                })

                localStorage.clear()
                localStorage.setItem('isLogin', data.isLogin)
                // 跳转到首页
                router.push('/')
            }

        } catch(e) {
            console.log(e)
        }

    } else {
      console.log('验证失败，请检查表单重试!')
      return false
    }
  })
}

const resetForm = formEl => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style lang="less" scoped>
.login-container {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 60, 109, .9);

    display: flex;
    justify-content: center;
    align-items: center;

    .login-center {
        width: 439px;
        height: 352px;
        background-color: rgba(255, 255, 255, .98);
        padding: 20px 40px;
        box-sizing: border-box;
        border-radius: 6px;
        box-shadow: 0 0 10px rgba(255, 255, 255, .28);

        h3 {
            text-align: center;
            font-weight: normal;
            font-size: 22px;
            letter-spacing: 5px;
            color: #666;
            font-family: 'consolas';
            padding: 30px 0;
            margin-bottom: 20px;
        }

        .eyes {
            cursor: pointer;
        }
    }

    .btns {
        margin-top: 40px;

        .el-button   {
            width: 75%;
        }
    }
}
</style>